<!DOCTYPE html>
<html>
<link rel="icon" type="image/x-icon" href="pictures/logo.svg">
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		li{list-style-type:none;}
		html,body{
			background-color: black;
			font-family: "Titillium Web", "Helvetica Neue", "Helvetica", Arial, sans-serif;
		}
		#box{
			margin: 30px 80px ;
		}
		#nav{
			width:100%;
			height:133px;
			background-image:url('pictures/backgound.jpg');
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 1;
		}
		.logo{
			float: left;
			padding: 10px;
		}
		#top{
			width: 100%;
			height: 37px;
		}
		#top img{
			position: absolute;
			left: 1355px;
			top: 45px;
			width:35px;
			height:50px;

		}
		#search input[type = 'text']{
			width: 156px;
			height: 39px;
			position: absolute;
			left: 1200px;
			top: 50px;
			background-color: #333333;
			border:none;
		}
		#search input[type = 'submit']{
			height: 30px;
			width: 30px;
			padding: 0;
			border:none;
			margin-top: 5px;
			top:0;
			position: absolute;
			left: 1320px;
			top: 50px;
			text-indent: -10000px;
			background: url("pictures/search.svg") center center no-repeat;
		}
		.dropbtn {
    		color: white;
    		padding: 16px;
    		font-size: 16px;
    		margin: 0px;
    		border-width: 0px 2px 0px 0px;
    		border-color: #A8A8A8;
    		cursor: pointer;
    	    background-color: transparent;
		}
		#nav-Last {
    		color: white;
    		padding: 16px;
    		font-size: 16px;
    		border: none;
    		cursor: pointer;
    		background-color: transparent;
		}
		.dropdown {
    		position: absolute;
    		left: 300px;
    		top: 25px;
    		display: inline-block;
		}
		#two{
			position: absolute;
    		left: 400px;
    		top: 25px;
    		display: inline-block;
		}
		#three{
			position: absolute;
    		left: 500px;
    		top: 25px;
    		display: inline-block;
		}
		#four{
			position: absolute;
    		left: 610px;
    		top: 25px;
    		display: inline-block;
		}
		#five{
			position: absolute;
    		left: 740px;
    		top: 25px;
    		display: inline-block;
		}
		#six{
			position: absolute;
    		left: 860px;
    		top: 25px;
    		display: inline-block;
		}
		#seven{
			position: absolute;
    		left: 950px;
    		top: 25px;
    		display: inline-block;
		}
		.dropdown-content {
    		display: none;
    		position: absolute;
    		background-color: #15418c;
    		min-width: 280px;
		}
		.dropdown-content a {
    		color: white;
    		padding: 12px 16px;
    		text-decoration: none;
    		display: block;
		}
		.dropdown-content a:hover {
			background-color:#000033;
		}
		.dropdown:hover .dropdown-content {
    		display: block;
    		z-index: 1;
		}
		.dropdown:hover .dropbtn {
    		background-color: #15418c;
		}
		#two:hover .dropdown-content {
    		display: block;
    		z-index: 1;
		}
		#two:hover .dropbtn {
    		background-color: #15418c;
		}
		#three:hover .dropdown-content {
    		display: block;
    		z-index: 1;
		}
		#three:hover .dropbtn {
    		background-color: #15418c;
		}
		#four:hover .dropdown-content {
    		display: block;
    		z-index: 1;
		}
		#four:hover .dropbtn {
    		background-color: #15418c;
		}
		#five:hover .dropdown-content {
    		display: block;
    		z-index: 1;
		}
		#five:hover .dropbtn {
    		background-color: #15418c;
		}
		#six:hover .dropdown-content {
    		display: block;
    		z-index: 1;
		}
		#six:hover .dropbtn {
    		background-color: #15418c;
		}
		#seven:hover .dropdown-content {
    		display: block;
    		z-index: 1;
		}
		#seven:hover #nav-Last {
    		background-color: #15418c;
		}
		#down{
			position: absolute;
			left: 200px;
			top: 100px;
		}
		#down ul{
			background-color: #606060;
			list-style-type: none;
			margin: 0px;
			overflow: hidden;
			padding: 2px;
    	}
		#down li a {
    		display: block;
    		color:white;
    		font-size: 13px;
    		text-align: center;
    		padding: 8px 15px;
    		text-decoration: none;
		}
		#down li{
			float: left;
			border-right: 1px solid #ccc;
		}
		#navL{
			float: left;
			color: white;
			font-size: 13px;
			text-decoration: none;
			border-right: 1px solid transparent;
			padding: 8px 15px;
		}
		#navL:hover{
			background-color: #707070;
		}
		#navL-text{
			color: white;
			text-decoration: none;
		}
		#down li a:hover:not(.ative){
			background-color: #707070;
		}
		#down li a.active {
    		color: white;
    		background-color: #585858;
		}
		#gif{
			width: 660px;
			height: 660px;
			position: absolute;
			top: 146px;
		}
		#research{
			width: 320px;
			height: 300px;
			position: absolute;
			top: 146px;
			left: 770px;
		}
		#ember-solar{
			background-color: rgb(93,127,185);
			color: white;
			cursor: pointer;
			font-size: 17px;
			position: absolute;
			top: 595px;
			left: 0px;
			padding: 6px 12px 6px 12px;
			text-decoration: none;
			opacity: 0.8;
		}
		#rocket{
			background-color: rgb(93,127,185);
			color: white;
			cursor: pointer;
			font-size: 17px;
			position: absolute;
			top:190px;
			left: 0px;
			padding: 6px 12px 6px 12px;
			text-decoration: none;
			opacity: 0.8;
		}
		#tag{
			color: black;
			width: 636px;
			opacity: 0.8;
			background-color: white;
			position: absolute;
			top: 626px;
			padding: 6px 12px 6px 12px;
			font-size: 19px;
		}
		#tag:hover{
			opacity:1;
		}
		#ember-solar:hover{
			opacity: 0.9;
		}
		#tag-research{
			color: black;
			width: 296px;
			opacity: 0.8;
			background-color: white;
			position: absolute;
			top: 220px;
			left: 0px;
			padding: 6px 12px 6px 12px;
			font-size: 19px;
			text-decoration: none;
		}
		#tag-research:hover{
			opacity:1;
		}
		#rocket:hover{
			opacity: 0.9;
		}
		#text-weekend{
			background-color: white;
			width: 320px;
			height: 276px;
			position: absolute;
			top: 146px;
			left: 1110px;
			padding: 12px 7px 12px 7px;
			font-size: 15px;
		}
		.text-weekend{
			color: rgb(93,127,185);
			text-decoration: none;
		}
		.text-weekend:hover{
			text-decoration: underline;
		}
		#head{
			padding: 6px 0px 0px 0px;
			margin: 0;
			font-size: 19px;
		}
		.p{
			padding: 3px;
		}
		#NASA-logo{
			position: absolute;
			top: 470px;
			left: 770px;
			width: 675px;
		}
		#tag-nasabig{
			color: black;
			width:651px;
			opacity: 0.8;
			background-color: white;
			position: absolute;
			top:300px;
			left: 0px;
			padding: 6px 12px 6px 12px;
			font-size: 19px;
			text-decoration: none;
		}
		#tag-nasabig:hover{
			opacity: 0.9;
		}
		#Humans {
			width: 320px;
			height: 320px;
			position: absolute;
			top: 830px;
		}
		#blue-Humans{
			background-color: rgb(93,127,185);
			color: white;
			cursor: pointer;
			font-size: 17px;
			position: absolute;
			top:235px;
			left: 0px;
			padding: 6px 12px 6px 12px;
			text-decoration: none;
			opacity: 0.8;
		}
		#tag-Humans{
			color: black;
			width:296px;
			opacity: 0.8;
			background-color: white;
			position: absolute;
			top:265px;
			left: 0px;
			padding: 6px 12px 6px 12px;
			font-size: 19px;
			text-decoration: none;
		}
		#tag-Humans:hover{
			opacity:1;
		}
		#blue-Humans:hover{
			opacity: 0.9;
		}
		#water{
			width: 640px;
			height: 320px;
			position: absolute;
			top: 830px;
			left:430px;
		}
		#blue-water{
			background-color: rgb(93,127,185);
			color: white;
			cursor: pointer;
			font-size: 17px;
			position: absolute;
			top:255px;
			left: 0px;
			padding: 6px 12px 6px 12px;
			text-decoration: none;
			opacity: 0.8;
		}
		#tag-water{
			color: black;
			width:616px;
			opacity: 0.8;
			background-color: white;
			position: absolute;
			top:285px;
			left: 0px;
			padding: 6px 12px 6px 12px;
			font-size: 19px;
			text-decoration: none;
		}
		#tag-water:hover{
			opacity:1;
		}
		#blue-water:hover{
			opacity: 0.9;
		}
		#updates{
			width: 331px;
			height: 308px;
			background-color: white;
			position: absolute;
			top: 830px;
			left: 1090px;
			padding: 20px 12px 6px 12px;
		}
		#wifi{
			position: absolute;
			top:10px;
			left: 314px;
		}
		#head-updates{
			font-size: 19px;
			color: rgb(93,127,185);
			text-decoration: none;
			padding:6px;
			font-weight: 700;
		}
		#text-updates1{
			position: absolute;
			left: 120px;
			top: 50px;
			font-size: 15px;
		}
		#text-updates2{
			position: absolute;
			left: 120px;
			top: 130px;
			font-size: 15px;
		}
		#text-updates3{
			position: absolute;
			left: 120px;
			top: 220px;
			font-size: 15px;
		}
		#updates-p1{
			width: 80px;
			height: 60px;
			position: absolute;
			left: -100px;
		}
		#updates-p2{
			width: 80px;
			height: 60px;
			position: absolute;
			left: -100px;
		}
		#updates-p3{
			width: 80px;
			height: 60px;
			position: absolute;
			left: -100px;
		}
		.updates-a-text{
			color: rgb(93,127,185);
			text-decoration: none;
		}
		.updates-a-text:hover{
			color:  #15418c;
			text-decoration: underline;
		}
		#head-updates:hover{
			color:  #15418c;
			text-decoration: underline;
		}
		#NASA-events{
			width: 308px;
			height: 308px;
			background-color: rgb(66,139,202);
			color: white;
			position: absolute;
			top: 1180px;
			margin: 0px;
			padding: 6px 6px 6px 6px;

		}
		#head-nasa-events{
			font-size: 19px;
			width: 296px;
			height: 20px;
		}
		.main-events{
			color: white;
			text-decoration: none;
			font-size: 13px;
		}
		.text-events-{
			color: white;
			text-decoration: none;
			position: absolute;
			top:300px;
			font-size: 13px;
		}
		.text-events--{
			color: white;
			text-decoration: none;
			position: absolute;
			top:300px;
			left: 160px;
			font-size: 13px;
		}
		.text-events-:hover{
			text-decoration: underline;
		}
		.text-events--:hover{
			text-decoration: underline;
		}
		.text-events:hover{
			text-decoration: underline;
		}
		#head-nasa-events:hover{
			text-decoration: underline;
		}
		#sun{
			width: 320px;
			height: 320px;
			position: absolute;
			top: 1180px;
			left: 430px;
		}
		#camera{
			width: 20px;
			height: 20px;
			position: absolute;
			top: 0px;
			left: 300px;
		}
		#tag-sun{
			color: black;
			width:296px;
			opacity: 0.8;
			background-color: white;
			position: absolute;
			top:265px;
			left: 0px;
			padding: 6px 12px 6px 12px;
			font-size: 19px;
			text-decoration: none;
		}
		#tag-sun:hover{
			opacity: 1;
		}
		#Artemis{
			width: 320px;
			height: 320px;
			position: absolute;
			top: 1180px;
			left: 770px;
		}
		#blue-Artemis{
			background-color: rgb(93,127,185);
			color: white;
			cursor: pointer;
			font-size: 17px;
			position: absolute;
			top:235px;
			left: 0px;
			padding: 6px 12px 6px 12px;
			text-decoration: none;
			opacity: 0.8;
		}
		#tag-Artemis{
			color: black;
			width:296px;
			opacity: 0.8;
			background-color: white;
			position: absolute;
			top:265px;
			left: 0px;
			padding: 6px 12px 6px 12px;
			font-size: 19px;
			text-decoration: none;
		}
		#blue-Artemis:hover{
			opacity: 0.9;
		}
		#tag-Artemis:hover{
			opacity: 1;
		}
		#bottom{
			background-color:#15418c ;
			color: white;
			text-align: center;
			width: 90%;
			padding: 10px;
			position: absolute;
			top:1520px;
		}
		#tail-text{
			color: white;
			position: absolute;
			top: 1600px;
			left:160px; 
			font-size: 15px;
			width: 350px;
		}
		#tail-right{
			position: absolute;
			top: 1600px;
		}
		#logo-tail{
			position: absolute;
			top: 1600px;
			width: 70px;
			height: 70px;
		}
		#tail-right{
			position: absolute;
			top: 1650px;
			left: 480px;
		}
		.a-tail{
			color: rgb(66,139,202);
			font-size: 13px;
			text-decoration: none;
			padding: 20px;
		}
		#tail-right{
			padding: 0px 0px 50px 0px;
			margin: 0px 0px 50px 0px;
		}
		.a-tail:hover{
			text-decoration: underline;
		}
	</style>
</head>
<body>
	<div id="box">
		<div id="nav">
			<div class="logo">
				<img src="pictures/logo.svg">
			</div>
			<div id="top">
				<img src="pictures/share.svg">
				<div id="search">
					<form id="search">
						<input type="text" name="search" placeholder="Search">
						<input type="submit" name="submit">
					</form>
				</div>
				<ul class ="dropdown">
					<li>
						<button class="dropbtn">Misson</button>
  						<div class="dropdown-content">
    					<a href="#">International Space Station</a>
    					<a href="#">Hubble Space Telescope</a>
    					<a href="#">Curiosity Mars Rover</a>
    					<a href="#">InSight Mars Lander</a>
    					<a href="#">Parker Solar Probe</a>
    					<a href="#">Artemis Program</a>
    					<a href="#">Commercial Crew</a>
    					<a href="#">Juno:Misson at Jupiter</a>
    					<a href="#">OSIRIS-REx Asteroid Mission</a>
    					<a href="#">James Webb Space Telescope</a>
    					<a href="#">New Horizons:Pluto and Beyond</a>
    					<hr>
    					<a href="#">Launches and Landings</a>
    					<a href="#">All Missions A-Z</a>
    					</div>
					</li>
				</ul>
				<ul id="two">
					<li>
						<button class="dropbtn">Galleries</button>
  						<div class="dropdown-content">
    					<a href="#">Image of the Day</a>
    					<a href="#">Image Galleries</a>
    					<a href="#">Videos</a>
    					<a href="#">Ultra High-Def Videos</a>
    					<a href="#">Usage and Copyright</a>
    					</div>
					</li>
				</ul>
				<ul id="three">
					<li>
						<button class="dropbtn">NASA TV</button>
					</li>
				</ul>
				<ul id="four">
					<li>
						<button class="dropbtn">Follow NASA</button>
  						<div class="dropdown-content">
    					<a href="#">Social Media</a>
    					<a href="#">NASA Socials</a>
    					<a href="#">NASA Blogs</a>
    					<a href="#">NASA Live</a>
    					<a href="#">Get Involved</a>
    					<a href="#">Spot the Station</a>
    					<a href="#">NASA Newsletter</a>
    					</div>
					</li>
				</ul>
				<ul id="five">
					<li>
						<button class="dropbtn">Downloads</button>
  						<div class="dropdown-content">
    					<a href="#">Apps</a>
    					<a href="#">Podcasts</a>                                                                                            
    					<a href="#">E-Books</a>
    					<a href="#">Audio & Ringtones</a>
    					</div>
					</li>
				</ul>
				<ul id="six">
					<li>
						<button class="dropbtn">About</button>
  						<div class="dropdown-content">
    					<a href="#">About NASA</a>
    					<a href="#">Leadership</a>
    					<a href="#">Organization</a>
    					<a href="#">Locations</a>
    					<a href="#">Exhibits and Speakers</a>
    					<a href="#">Astronauts</a>
    					<a href="#">People of NASA</a>
    					<a href="#">Careers@NASA</a>
    					</div>
					</li>
				</ul>
				<ul id="seven">
					<li>
						<button id="nav-Last">NASA Audiences</button>
  						<div class="dropdown-content">
    					<a href="#">For Media</a>
    					<a href="#">For Educators</a>
    					<a href="#">For Students</a>
    					</div>
					</li>
				</ul>
				<div id="down">
					<ul>
						<li><a href="#">Humans in Space</a></li>
						<li><a href="#">Moon to Mars</a></li>
						<li><a href="#">Earth</a></li>
						<li><a href="#">Space Tech</a></li>
						<li><a href="#">Flight</a></li>
						<li><a href="#">Solar System and Beyond</a></li>
						<li><a href="#">STEM Engagement</a></li>
						<li><a href="#">History</a></li>
						<div id="navL"><a id="navL-text" href="#">Benefits to You</a></div>
					</ul>
				</div>
		</div>
	</div>
	<div id="main">
		<a href="#">
			<div id="gif">
				<img src="pictures/solar.gif" width="100%" height="100%">
				<a href="#" id="ember-solar">Solar Orbiter</a>
				<div id="tag">
				ESA, NASA Solar Orbiter "Go" for Sunday Launch on Voyage to Sun
				</div>
			</div>
		</a>
		<a href="#">
			<div id="research">
				<img src="pictures/2.png" width="100%" height="100%">
				<a href="#" id="rocket">Space Station Research</a>
				<a href="#" id="tag-research">New Research Launching Sunday to Space Station on Northrup Grumman Cygnus</a>
			</div>
		</a>
		<div id="text-weekend">
			<p id="head">NASA's Big Weekend<p>
			<p class="p">Learn about the science aboard the<a href="#" class="text-weekend"> Northrop Grumman cargo resupply mission</a> to the International Space Station.</p>
			<p class="p">The ESA-NASA Solar Orbiter will take the<a href="#" class="text-weekend"> first images of the Sun' polar regions. Find out more</a>
			</p>
			<p class="p">What is the<a href="#" class="text-weekend"> State of NASA</a>? Administrator Jim Bridenstine will tell you on Monday.</p>
			<p class="p">Watch it all on<a href="#" class="text-weekend"> nasa.gov/live</a>.
			</p>
		</div>
		<a href="#">
			<div id="NASA-logo">
				<img src="pictures/nasabig.jpg" width="100%">
				<a href="#" id="tag-nasabig" >NASA Spotlights Moon to Mars Plans at Feb. 10'State of NASA' Events</a>
			</div>
		</a>
		<a href="#">
			<div id="Humans">
				<img src="pictures/human.jpg" width="100%">
				<a href="#" id="blue-Humans">Humans in Space</a>
				<a href="#" id="tag-Humans">Media Invited to Speak With Astronaut Christina Koch</a>
			</div>
		</a>
		<a href="#">
			<div id="water">
				<img src="pictures/ice.jpg" width="100%">
				<a href="#" id="blue-water">Water</a>
				<a href="#" id="tag-water">Arctic Ice Melt Is Changing Ocean Currents</a>
			</div>
		</a>
		<div id="updates">
			<a href="#" id="head-updates">Northrop Grumman Updates</a>
			<img id="wifi" src="pictures/wifi.png" >
			<div id="text-updates1">
				<img id="updates-p1" src="pictures/ship.jpg">
				<a href="#" class="updates-a-text">Next Northrop Grumman CRS-13 Launch Attemp NET...</a>
				<p>an hour ago</p>
			</div>
			<div id="text-updates2">
				<img id="updates-p2" src="pictures/moon.jpg">
				<a href="#" class="updates-a-text">Northrop Grumman CRS-13 Launch Scrubbed</a>
				<p>3 hours ago</p>
			</div>
			<div id="text-updates3">
				<img id="updates-p3" src="pictures/black.jpg">
				<a href="#" class="updates-a-text">Watch Northrop Grumman's CRS-13 Launch Live Online</a>
				<p>4 hours ago</p>
			</div>
		</div>
		<div id="NASA-events">
			<div id="head-nasa-events">NASA Events</div>
			<div class="text-events">
				<a href="#" class="main-events">Mon. Feb. 10, 1 p.m. EST: "State of NASA" address by Administrator Jim Bridenstine</a>
			</div>
			<div class="text-events">
				<a href="#" class="main-events">Wed., Feb. 12, 3 p.m. EST: NASA Astronaut Christina Koch Post-flight News Conference</a>
			</div>
			<div class="text-events">
				<a href="#" class="main-events">Thu., Feb. 13, 3:30 p.m. EST: Coverage of Northrop Grumman CRS-13 launch</a>
			</div>
			<div class="text-events">
				<a href="#" class="main-events">Sat., Feb. 15, 3 a.m. - Rendezvous of the Northrop Grumman Cygnus CRS-13 at the International Space Station</a>
			</div>
			<div class="text-events">
				<a href="#" class="main-events">Sat., Feb. 15, 6:15 a.m. - Installation of the Northrop Grumman Cygnus CRS-13 to the International Space Station</a>
			</div>
			<div class="text-events-">
				<a href="#" class="main-events">NASA TV Schedule</a>
			</div>
			<div class="text-events--">
				<a href="#" class="main-events" >Launch and Landings</a>
			</div>
		</div>
		<a href="#">
			<div id="sun">
				<img src="pictures/sun.jpg" width="100%">
				<img id="camera" src="pictures/camera90.svg">
				<a href="#" id="tag-sun">Launch of the ESA/NASA Solar Orbiter</a>
			</div>
		</a>
		<a href="#">
			<div id="Artemis">
				<img src="pictures/car.jpg" width="100%">
				<a id="blue-Artemis" href="#">Artemis</a>
				<a id="tag-Artemis" href="#">NASA to Industry:Send Ideas for Lunar Rovers</a>
			</div>
		</a>
	</div>
	<div id="bottom">MORE STORIES</div>
	<div id="tail">
		<div id="tail-left">
			<img id="logo-tail"src="pictures/logo.svg">
			<div id="tail-text">National Aeronautics and Space Administration
			NASA Official: Brian Dunbar
			</div>
		</div>
		<div id="tail-right">
			<a href="#" class="a-tail">No Fear Act </a>
			<a href="#" class="a-tail">FOIA</a>
			<a href="#" class="a-tail">Privacy </a>
			<a href="#" class="a-tail">Office of Inspector General </a>
			<a href="#" class="a-tail">Office of Special Counsel </a>
			<a href="#" class="a-tail">Agency Financial Reports</a>
			<a href="#" class="a-tail">Contact NASA</a>
		</div>
	</div>
</body>
</html>